<template>
  <el-drawer
    class="drawer-main"
    :title="title"
    :visible.sync="drawer"
    :direction="direction"
    :destroy-on-close="destroyOnClose"
    :wrapperClosable="wrapperClosable"
    :before-close="beforeClose"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="drawer-content">
      <slot></slot>
    </div>
    <div class="drawer-bottom">
      <slot name="extraButtons_left"></slot>
      <EvButton v-if="showCancel" @click="handleCancel">{{
        $attrs.cancelText
          ? $attrs.cancelText
          : $t("common.common_operation_cancel")
      }}</EvButton>
      <slot name="extraButtons_center"></slot>
      <EvButton v-if="showConfirm" type="primary" @click="handleConfirm">{{
        $attrs.confirmText
          ? $attrs.confirmText
          : $t("common.common_operation_confirm")
      }}</EvButton>
      <slot name="extraButtons_right"></slot>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    wrapperClosable: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default: "rtl",
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    showConfirm: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "提示",
    },
  },
  data() {
    return {};
  },
  methods: {
    // drawer自身关闭事件
    beforeClose(done) {
      this.$emit("handleClose", done);
    },
    // 取消点击事件
    handleCancel() {
      this.$emit("handleCancel");
    },
    // 确认点击事件
    handleConfirm() {
      this.$emit("handleConfirm");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.drawer-main {
  .el-drawer__header {
    font-size: 16px;
    color: #4d4e50;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #eaeaec;
  }
}

.drawer-content {
  min-height: 100%;
  padding: 12px 20px 72px 20px;
}

.drawer-bottom {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  justify-content: flex-end;
  height: 60px;
  padding: 10px 16px;
  border-top: 1px solid #eaeaec;
  z-index: 10;
  background: #fff;
}
</style>
